<template>
	<div class="section section-share text-c">
		<div ref="shareEle" class="section-inner">
      <img :src="require('../../../assets/img/yearReport/2020/platform/'+(new Date(reportData.startDate).getFullYear()||'emicon')+'.png')" class="img-year">
      <img src="../../../assets/img/yearReport/2020/platform/title.png" class="img-title">
      <div class="envelope-wrap">
        <img class="envelope-cover" src="../../../assets/img/yearReport/2020/platform/envelope-cover.png" />
        <div :class="{ 'is-show':showQrcode }" class="qrcode">
          <img v-if="url" class="qrcode-img" :src="url" />
        </div>
      </div>
      <div class="scan-tip">扫码开启{{new Date(reportData.startDate).getFullYear()}}年报</div>
    </div>
    <img v-if="shareImg" class="img-share" :src="shareImg" />
		<div v-if="shareImg" class="press-text text-c">长按保存图片</div>
	</div>
</template>

<script>
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
export default {
	props: {
    reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		orgName: {
			type: String,
			default: '',
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		active(val) {
			if (val) {
				this.createQrcode()
			}
		}
	},
	data() {
		return {
      showQrcode:false,
      url:'',
      shareImg:''
    }
	},
	methods: {
    createImg(){
      html2canvas(this.$refs.shareEle,{
        useCORS:true,
      }).then((canvas)=> {
        html2canvas(this.$refs.shareEle,{
          useCORS:true,
        }).then((canvas)=> {
          this.shareImg=canvas.toDataURL()
        });
      });
    },
    createQrcode(){
      QRCode.toDataURL(location.href.replace('inFrame=1&','').replace('inFrame=1',''),{
          margin:3
        })
					.then((url) => {
            this.url=url
            setTimeout(()=>{
              this.showQrcode=true
            },700)
            setTimeout(()=>{
              this.createImg()
            },1200)
					})
					.catch((err) => {
						console.error(err)
					})
    }
  },
	mounted() {},
}
</script>